<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Debugger Demo</title>
  <script src="bin/debugger.js"></script>
  <script>
var index = 0;

DebuggerInit({
  locateFile: (file) => '/node_modules/debugger/bin/'+file,
}).ready().then((Debugger) => {
  const surface = Debugger.MakeSWCanvasSurface('debugger_view');
  const player = new Debugger.SkpDebugPlayer();

  // Define an event handler for the file input dialog
  function readSkpFile(e){
    // Did the change event result in the file-input element specifing a file? (user might have cancelled the dialog)
    const file = e.target.files[0];
    if (!file) {
      return;
    }
    // create a callback for when the file finishes being read.
    const reader = new FileReader();
    reader.onload = function(e) {
      // Convert e.target.result (an ArrayBuffer) into a typedarray,
      // otherwise fileMem.set() below seems to have no effect.
      const fileContents = new Uint8Array(e.target.result);
      const size = fileContents.byteLength;
      // Allocate memory in wasm to hold the skp file selected by the user.
      const fileMemPtr = Debugger._malloc(size);
      // Make a typed array view of that memory
      let fileMem = new Uint8Array(Debugger.buffer, fileMemPtr, size);
      // Copy the file into it
      fileMem.set(fileContents);
      // Hand off pointer to wasm
      player.loadSkp(fileMemPtr, size);
    };
    reader.readAsArrayBuffer(file);
  }

  function playFile() {
    interval = Number(document.getElementById('interval').value)
    var intervalID = setInterval(function(){
        if (index < 789){
          player.drawTo(surface, index);
          surface.flush();
          index++;
          console.log("index = "+index);
        }
    }, interval);
  }

  document.getElementById('file-input')
    .addEventListener('change', readSkpFile, false);

  document.getElementById('playbutton')
    .addEventListener('click', playFile, false);

});
  </script>
  </head>
  <body>
    <canvas id=debugger_view width=720 height=1280></canvas>
    <div style="float:right">
      <input type="file" id="file-input" /><br>
      <input type="button" id="playbutton" value="Play" />
      command interval in ms
      <input type="text" id="interval" value="20" />
    <div>
    <div style="float:clear"></div>
  </body>
</html>
